<template>
  <div class="player-bar">
    <div class="container">
      <div class="left">
        <div class="avater" @click="openSongDetail">
          <el-image :src="state.playList[state.currentIndex].imgUrl"></el-image>
        </div>
        <div class="left-info">
          <p>{{state.playList[state.currentIndex].name}}</p>
          <p>{{state.playList[state.currentIndex].artists}}</p>
        </div>
      </div>
      <div class="center">
        <div class="control-btn-wrap">
          <i class="fa fa-step-backward backward" @click="prevSong"></i>

          <i v-show="!state.isPlay" class="fa fa-play-circle control" @click="audioPlay"></i>
          <i v-show="state.isPlay" class="fa fa-pause-circle-o control" @click="audioPaused"></i>

          <i class="fa fa-step-forward forward" @click="nextSong"></i>
        </div>
        <div class="progress-bar">
          <span>{{currentTime}}</span>
          <el-slider v-model="currentPercent" size="small" @input="changeProgress" />

          <span>{{currentSongDuration}}</span>
        </div>
      </div>
      <div class="right">
        <div class="right-btn-wrap">
          <div class="voice-wrap">
            <i
              v-show="isMuted"
              class="fa fa-volume-off"
              style="font-size:25px"
              @click="mutedHandle(true)"
            ></i>
            <i
              v-show="!isMuted"
              class="fa fa-volume-up"
              style="font-size:25px"
              @click="mutedHandle(false)"
            ></i>
            <el-slider v-model="currentVolume" :show-tooltip="false" @input="changeVolume" />
          </div>

          <div class="tools-wrap">
            <i class="fa fa-list-ul" style="font-size:25px" @click="fadePlaylist"></i>
          </div>
        </div>
        <audio
          ref="audio"
          :src="state.playList[state.currentIndex].url"
          @timeupdate="updateTime"
          :muted="isMuted"
          @ended="audioEnd"
        ></audio>
      </div>
    </div>
    <transition name="play-list-slide">
      <div class="play-list-wrap" v-if="playListShow">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>当前播放</span>
              <i class="fa fa-trash-o" style="font-size:25px" @click="clearPlayList"></i>
            </div>
          </template>
          <div class="play-list-item-wrap">
            <RisingVirtualList
              :list="state.playList"
              :itemHeight="20"
              :showNum="19"
              :start="0"
              :end="19"
            >
              <template v-slot:default="slotItem">
                <play-list-item
                  :songInfo="slotItem.songInfo"
                  @click="switchSong(slotItem.songInfo.id)"
                ></play-list-item>
              </template>
            </RisingVirtualList>
            <!-- <play-list-item v-for="item in playList" :key="item.id" :songInfo="item" @click="switchSong(item.id)"></play-list-item> -->
          </div>
        </el-card>
      </div>
    </transition>

    <transition name="play-detail-slide">
      <div class="drawer" v-if="detailDrawerShow">
        <div class="drawer-top">
          <div class="song-cover">
            <!-- <el-image
              src="http://image-yunsheng.test.upcdn.net/typora-cloud-img/raw/master/202206121808982.png"
            ></el-image> -->
          </div>

          <div class="lyric-wrap">

              

          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang='ts'>
import {
  defineComponent,
  ref,
  reactive,
  computed,
  onMounted,
  watch,
  nextTick,
} from "vue";

import { timeFilter, formatTime } from "../../hooks/use-time-filter";
import { useStore } from "vuex";
import RisingVirtualList from "../List/Rising-Virtual-List.vue";
import playListItem from "../Home/Play-List-Item.vue";

export default defineComponent({
  setup(props) {
    //获取audio节点
    const audio: any = ref(null);

    const store = useStore();

    const state = computed(() => {
      // 使用计算属性来监听Vuex数据的变化
      return store.state;
    });

    const playList = computed(() => {
      return store.state.playList;
    });

    const isPlay = computed(() => {
      return store.state.isPlay;
    });

    const currentSongDuration = computed(() => {
      //获取当前歌曲时长
      return timeFilter(
        store.state.playList[store.state.currentIndex].duration
      );
    });

    onMounted(() => {
      audio.value.play();
      //   currentVolume.value = localStorage.getItem("historyVolume");
    });

    watch(
      //监听isPlay
      isPlay,
      (newValue, oldValue) => {
        if (newValue) {
          nextTick(() => {
            //在下一次dom更新之后再执行回调,否则获取不到audio节点
            audioPlay();
          });
        } else {
          nextTick(() => {
            //在下一次dom更新之后再执行回调,否则获取不到audio节点
            audioPaused();
          });
        }
      },
      { deep: true }
    );

    watch(
      //监听playList
      playList,
      (newValue, oldValue) => {
        console.log("播放");

        if (newValue.length >= oldValue.length) {
          //删除歌曲功能做出来后 这里的逻辑还要完善

          nextTick(() => {
            //在下一次dom更新之后再执行回调,否则获取不到audio节点
            audioPlay();
          });
        }
      },
      { deep: true }
    );

    let currentTime = ref("");
    let currentPercent = ref(0);
    let currentVolume: any = ref(Number(localStorage.getItem("historyVolume")));
    // console.log("初始currentVolume",currentVolume.value);

    let isMuted = ref(false);

    let playListShow = ref(false);

    let detailDrawerShow = ref(false);

    const changePlayState = () => {
      console.log(`${store.state.isPlay ? "暂停播放" : "继续播放"}`);

      store.state.isPlay ? audioPaused() : audioPlay();

      store.dispatch("changePlayState");
    };

    const audioPaused = () => {
      console.log("音乐暂停");

      audio.value.pause();
      store.dispatch("changePlayState", false);
    };

    const audioPlay = () => {
      console.log("播放音乐");
      audio.value.play();
      store.dispatch("changePlayState", true);
    };

    const prevSong = () => {
      //播放上一首歌

      console.log("播放上一首歌");

      if (store.state.currentIndex === -1) return;

      store.dispatch("switchSong", -1);

      nextTick(() => {
        audioPlay();
      });
    };
    const nextSong = () => {
      //播放下一首歌

      console.log("播放下一首歌");

      if (store.state.currentIndex === -1) return;

      store.dispatch("switchSong", 1);

      nextTick(() => {
        audioPlay();
      });
    };

    const switchSong = (id: string): void => {
      //在播放列表中切换歌曲

      store.dispatch("switchSong", id);
      nextTick(() => {
        audioPlay();
      });
    };

    const updateTime = (e) => {
      //更新歌曲当前播放进度
      // console.log("歌曲进度",e.target.currentTime);

      currentTime.value = formatTime(e.target.currentTime, "s");

      currentPercent.value =
        (e.target.currentTime /
          store.state.playList[store.state.currentIndex].duration) *
        1000 *
        100;
    };

    const changeProgress = (val) => {
      //改变歌曲进度

      audio.value.currentTime =
        parseFloat(val / 100) *
        parseFloat(
          store.state.playList[store.state.currentIndex].duration / 1000
        );

      currentTime.value = formatTime(audio.value.currentTime, "s");
    };

    const changeVolume = (val) => {
      //修改音量

      audio.value.volume = val / 100;

      currentVolume.value = val;
      //   console.log("currentVolume", currentVolume.value);
    };

    const mutedHandle = (val: boolean) => {
      console.log("val", val);

      console.log(`${val ? "关闭静音" : "开启静音"}`);

      if (val === false) {
        localStorage.setItem("historyVolume", currentVolume.value);
        isMuted.value = true;
        currentVolume.value = 0;
        nextTick(() => {
          //   audio.value.volume = currentVolume.value;
        });
      } else {
        isMuted.value = false;
        console.log("historyVolume", localStorage.getItem("historyVolume"));

        nextTick(() => {
          currentVolume.value = Number(localStorage.getItem("historyVolume"));
          //   audio.value.volume = currentVolume.value / 100;
        });
      }
    };

    const fadePlaylist = () => {
      //打开/关闭播放列表
      console.log("打开/关闭播放列表");

      playListShow.value = !playListShow.value;
    };

    const openSongDetail = () => {
      //打开/关闭歌曲详情

      console.log(
        `${detailDrawerShow.value ? "关闭歌曲详情" : "打开歌曲详情"}`
      );

      detailDrawerShow.value = !detailDrawerShow.value;
    };

    const audioEnd = () => {
      // 歌曲播放完成 播放下一首歌
      currentPercent.value = 0;
      nextSong();
    };
    const clearPlayList = () => {
      //清空播放列表

      console.log("清空播放列表");

      store.dispatch("clearPlayList");
    };

    return {
      state,
      audio,
      audioPaused,
      audioPlay,
      changePlayState,
      prevSong,
      nextSong,
      playList,
      currentSongDuration,
      updateTime,
      currentTime,
      currentPercent,
      changeProgress,
      changeVolume,
      currentVolume,
      isMuted,
      mutedHandle,
      fadePlaylist,
      playListShow,
      detailDrawerShow,
      clearPlayList,
      switchSong,
      audioEnd,
      openSongDetail,
    };
  },
  components: { RisingVirtualList, playListItem },
});
</script>
 
<style lang = "scss" scoped>
@import "../../assets/css/player.scss";
</style>

<style lang = "scss" >
.volume-popper {
  width: 20px !important;
  min-width: 20px !important;
  padding: 10px 0 !important;
  /* padding-top: 5px; */
  margin: 0 !important;
  box-sizing: border-box !important;
}
.volume-slider {
  /* width:20px; */

  box-sizing: border-box !important;
  text-align: center;
  .el-slider {
    --el-slider-main-bg-color: red;
    --el-slider-button-size: 15px;

    justify-content: center;
    align-items: center;
    padding-right: 5px;
    box-sizing: border-box !important;

    --el-slider-runway-bg-color: black;
  }
}
</style>
